<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>offset</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.box{
				width: 400px;
				height: 400px;
				background-color: skyblue;
				margin: 20px;
				padding: 18px;
				position: relative;
			}
			.box1{
				width: 200px;
				height: 200px;
				background-color: pink;
				margin: 15px;
				padding: 20px;
				border: 8px solid #000;
				overflow: scroll;
			} 
			p{
				width: 800px;
				height: 800px;
				background-color: green;
			}
		</style>
	</head>
	<body style="height: 3000px;">
		<div class="box">
			<div class="box1">
				<p>66666</p>
			</div>
		</div>


		<script type="text/javascript">
			
			let oBox = document.querySelector('.box1')
			
			
			document.onclick = function(){
				console.log('offsetoffsetoffsetoffset');
				console.log(  oBox.offsetLeft  );
				console.log(  oBox.offsetTop  );
				console.log(  oBox.offsetWidth  );
				console.log(  oBox.offsetHeight  );
				console.log('clientclientclientclientclient');
				console.log(  oBox.clientLeft  );
				console.log(  oBox.clientTop  );
				console.log(  oBox.clientWidth  );
				console.log(  oBox.clientHeight  );
				console.log(    document.documentElement.clientWidth  );
				console.log(    document.documentElement.clientHeight  );
				console.log('scrollscrollscroll');
				console.log(  oBox.scrollLeft  );
				console.log(  oBox.scrollTop  );
				console.log(  oBox.scrollWidth  );
				console.log(  oBox.scrollHeight  );	
				console.log(11);
				console.log(  document.documentElement.scrollTop  );
				console.log(  document.documentElement.scrollLeft  );
				// document.documentElement.scrollTop  = 0
				window.scrollTo({
					top: 0,
					behavior: "smooth"
				});
			}
			
			
			
			/*
			offset  client  scroll
				## **1.1. **元素偏移量 offset 系列
				### 1.1.1 offset 概述 
				offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。
				1. 获得元素距离带有定位父元素的位置
				2. 获得元素自身的大小（宽度高度）
				3. 注意：返回的数值都不带单位
				### 1.1.2 offset 与 style 区别 
				#### offset
				- offset 可以得到任意样式表中的样式值
				- offset 系列获得的数值是**没有单位**的
				- offsetWidth 包含padding*2+border*2+width
				- offsetWidth 等属性是**只读**属性，只能获取不能赋值
				- > 所以，我们想要获取元素大小位置，用offset更合适
				********************
				offsetTop获取与定位父级 上面的距离
					console.log(oDiv2.offsetTop);
				offsetLeft获取与定位父级 左边面的距离
					console.log(oDiv2.offsetLeft);
				offsetHeight 获取元素的高度包含 边框内边距
					console.log(oDiv2.offsetHeight);
				offsetWidth  获取元素的宽度 包含 边距内边距
					console.log(oDiv2.offsetWidth);
				******************
				#### style
				- style 只能得到行内样式表中的样式值
				- style.width 获得的是带有单位的字符串
				- style.width 获得不包含padding和border 的值
				- style.width 是可读写属性，可以获取也可以赋值
				- > 所以，我们想要给元素更改值，则需要用style改变
				getComputedStyle
				该方法用于获取计算机（浏览器）计算后的样式，即获取的是元素最终的样式。
				它可以访问所有样式，即既可以是行内样式，也可以是内嵌或链式样式。
					getComputedStyle(oDiv2).width  
				
				## 1.2. 元素可视区 client 系列
				### 1.2.1 client概述
				client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client
				系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
				clientLeft  获取元素左边框的大小
				clientTop  获取元素上边框的大小
				clientWidth  获取元素的宽度 包含内边距不包含边框
				clientHeight  获取元素的高度 包含内边距不包含边框
				如果有box-sizing
				网页可见区域的高度和宽度（不加边线）：
				console.log(document.documentElement.clientHeight);
				console.log(document.documentElement.clientWidth);
			
				
				## 1.3.元素滚动 scroll 系列  ***
					scrollHeight 实际内容的高度
					scrollWidth 实际内容的宽度
					scrollTop 元素上方被卷去的高度-可以设置
					scrollLeft 元素上方被卷去的高度-可以设置
					window.pageYOffset  元素上方被卷去的高度-不可以设置
					window.pageXOffset  元素上方被卷去的高度-不可以设置
				
				
				例：返回顶部功能 习题
			
				## 1.4. 三大系列总结
				
				他们主要用法：
				
				1.offset系列 经常用于获得元素位置    offsetLeft  offsetTop  offsetWidth  offsetHeight
				
				2.client经常用于获取元素可视区域  clientWidth clientHeight 注意不包含边框
				console.log(document.documentElement.clientHeight);
				console.log(document.documentElement.clientWidth);
				
				3.scroll 经常用于获取滚动距离 scrollTop  scrollLeft  
				
				4.注意页面滚动的距离通过 window.pageXOffset  获得
				网页可见区域的高度和宽度（不加边线）：
				console.log(document.documentElement.clientHeight);
				console.log(document.documentElement.clientWidth);
				```
				5.
				window.scrollTo({
					top: 0,
					behavior: "smooth"
				});
				top 等同于 y-coord
				left 等同于 x-coord
				behavior 类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto,实测效果等同于instant

			*/
		</script>
	</body>
</html>
